import { Component, ElementRef, ViewChild, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FaucetService } from '../faucet.service';
import { ViewData } from '../faucet';
@Component({
    selector: 'app-detail-view',
    templateUrl: './detail-view.component.html',
    styleUrls: ['./detail-view.component.css']
})

export class DetailViewComponent implements OnInit {

    @ViewChild('chart') chart: any
    constructor(private route: ActivatedRoute, private faucetService: FaucetService) { }
    detailData: ViewData[] = []
    option: {} = {}
    hourChart = {}
    dailyChart = {}
    ngOnInit(): void {
        this.getDetailData()
    }

    initCharts(req: any) {
        const { text, legend, series, div_id, time } = req
        console.log(req)
        const option = {
            title: {
                text: text
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: legend
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: series
        };
        return option

    }
    getDetailData() {
        const id = Number(this.route.snapshot.paramMap.get('id'))
        this.faucetService.getByIdFucet(id).subscribe(faucet => this.detailData = faucet)
        this.faucetService.getCharts(id).subscribe(chart => {
            let legend_hour:any[] = []

            chart[0].forEach((element:any) => {
              legend_hour.push(element.name)
            });
      
            let legend_daily:any[] = []
            chart[1].forEach((element:any) => {
              legend_daily.push(element.name)
            });
            const req1 = { text: "24小时数据图", legend: legend_hour, series: chart[0], div_id: "main_hour" ,time:chart[2]}
            const req2 = { text: "30天数据图", legend: legend_daily, series: chart[1], div_id: "main_daily",time:chart[3]}
            this.dailyChart = this.initCharts(req1)
            this.hourChart = this.initCharts(req2)
        })
    }


}
